<template>
  <div>
    <div class="tab">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="登录账户设置" name="first">
            <div class="userForm">
              <el-form
                ref="userForm"
                :model="userInfo"
                status-icon
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
              >
                <!-- 姓名 -->
                <el-form-item label="姓名" prop="username">
                  <el-input v-model="userInfo.username" />
                </el-form-item>

                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="userInfo.password"
                    type="password"
                    autocomplete="off"
                  />
                </el-form-item>

                <!-- 底部按钮 -->
                <div class="submitBut">
                  <el-button type="primary" @click="addSubmit">更新</el-button>
                  <el-button @click="cancel">取消</el-button>
                </div>
              </el-form>
            </div>
          </el-tab-pane>

          <!-- 个人详情 -->
          <el-tab-pane label="个人详情" name="second">
            <UserInfo />
          </el-tab-pane>

          <!-- 岗位信息 -->
          <el-tab-pane label="岗位信息" name="third">
            <JobInfo />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script lang="js">

import {
  // 员工详情信息
  getOperationInfoApi,
  // 保存用户数据
  getAddInfoApi
} from '@/api/employeeOperation.js'
// 导入个人详情组件
import UserInfo from '@/views/employees/component/userInfo.vue'
// 导入岗位信息组件
import JobInfo from '@/views/employees/component/jobInfo'
export default {
  name: 'ExamineInfo',
  components: {
    UserInfo,
    JobInfo
  },
  data() {
    return {
      activeName: 'first', // 当前选择项
      // 用户信息
      userInfo: {
        username: '',
        password: 1
      },
      id: this.$route.query.id,
      // 验证
      rules: {
        username: [
          { required: true, message: '请输入您的姓名', trigger: 'change' },
          { min: 1, max: 50, message: '姓名长度在 1~50字符之间', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入您的密码', trigger: 'change' },
          { min: 4, max: 50, message: '密码长度在 4~50字符之间', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getInfoData()
  },

  methods: {
    // 提交按钮 获取某个用户的基本信息
    async addSubmit() {
      const res = await getAddInfoApi(this.userInfo)
      this.$message({
        message: res.message,
        type: 'success'
      })
      this.$router.push('/employees')
    },
    getInfoData() {
      const routeId = this.$route.query.id
      this.$refs.userForm.validate(async res => {
        const resId = await getOperationInfoApi(routeId)
        this.userInfo = resId.data
      })
    },
    // 取消
    cancel() {}
  }
}
</script>

<style lang="scss" scope>
.tab {
  margin: 20px 40px;
  // 用户表单
  .userForm {
    form.el-form.demo-ruleForm {
      margin: 40px 40px;
      margin-left: 200px;
      width: 500px;
      line-height: 60px;
    }
    .el-form-item {
      margin-bottom: 35px;
    }
  }
  .submitBut {
    margin-left: 298px;
  }
}
</style>
